<template>
  <div class="preview-content">
    <div class="publish-resource">
      <div class="resource-bar">
        <a href="javascript:;" class="resource-bar-item" :class="{'is-disabled': !item.canUse,'is-choose': item.id === currentResource}" v-for="item in myResources" :key="item.id" @click="handleChooseResource(item)">
          <div class="resource-bar-icon">
            <i class="iconfont" v-html="item.icon"></i>
          </div>
          <span>{{item.name}}</span>
        </a>
      </div>
      <Transition name="window">
        <div class="resource-window" v-show="currentResource !== 0">
          <div class="import-temps-content">
            <div class="header-search" v-show="true">
              <input type="text" v-model="templateQuery.name" placeholder="请输入需要查找的关键词">
              <a href="javascript:;" @click="searchAppearance">
                <i class="iconfont">&#xe643;</i>
              </a>
            </div>
            <div class="inner-temps-content">
              <el-scrollbar>
                <!-- 外观列表 -->
                <ul class="questions-model" v-loading="appearanceListLoading">
                  <li v-for="(item,index) in appearanceList" :key="index" :class="{active: index === activeApperanceIndex}" @click="handleApperance(index)">
                    <img :src="item.backgroundImg" alt="" v-if="item.backgroundType == 'img'">
                    <div v-else class="color-box" :style="{backgroundColor: item.backgroundColor}"></div>
                    <div class="name">{{ item.name }}</div>
                  </li>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </Transition>
    </div>
    <!-- 中间操作区域 -->
    <div class="preview-father">
      <FormEcho :formData="formInfo" height="calc(100vh - 134px)" :disabled="false" :showDevice="true" />
    </div>
    <!-- 右侧配置项 -->
    <div :class="{
          'safe-scan': true,
          'right-box': true,
          'col-expand': scanDrawer,
        }">
      <div class="safe-scan-detail">
        <div class="col-btn" @click="toggleExpand">
          <i class="iconfont">&#xe771;</i>
        </div>
        <right-setting v-model:activeApperanceIndex="activeApperanceIndex" :currentResource="currentResource" @refreshAppearance="handleGetMyAppearance" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import rightSetting from './rightSetting.vue'
import { FormEcho } from '@ruifox-cms/components'
import { useStore } from 'vuex'
import { getRecommendAppearance, getMyAppearance } from "@/api/formDesign";

const store = useStore();
const formInfo = computed(()=>store.state.formDesignInfo.previewFormDesign);

let leftModuleWidth = ref(430 + 'px') //左侧模块宽度
let rigthModuleWidth = ref(370 + 'px') //右侧模块宽度
const setPreviewFather = (isShow, boxWith = 500) => {
  let previewFather = document.querySelector('.preview-father')
  let previewBox = document.querySelector('.preview-box')
  let fWidth = previewFather.offsetWidth
  let bWidth = previewBox.offsetWidth
  let cutWidth = isShow ? boxWith : -boxWith
  if(fWidth - cutWidth < bWidth){
    previewBox.style['left'] = '0'
    previewBox.style['transform'] = 'translateX(0)'
  }else{
    previewBox.style['left'] = '50%'
    previewBox.style['transform'] = 'translateX(-50%)'
  }
}
const scanDrawer = ref(true)
const toggleExpand = () => {
  scanDrawer.value = !scanDrawer.value
  setPreviewFather(scanDrawer.value, parseInt(rigthModuleWidth.value))
}
const defaultQuery = {
  name: ''
}
const templateQuery = reactive(Object.assign({}, defaultQuery))
/***
 * 我的资源
 * ***/
 const myResources = reactive([
  {
    id: 1,
    icon: '&#xe66c;',
    name: '推荐外观',
    canUse: true,
  },
  {
    id: 2,
    icon: '&#xe66c;',
    name: '我的外观',
    canUse: true,
  }
])
const currentResource = ref(1)//是否展开外观资源
const appearanceList = ref([])
const appearanceListLoading = ref(false)
// 推荐外观获取
const handleGetRecommendAppearance = async (params) => {
  appearanceListLoading.value = true
  let res = await getRecommendAppearance(params)
  try{
    if(res.code === 20000){
      appearanceList.value = res.data
    }
  }catch{
    appearanceListLoading.value = false
  }
  appearanceListLoading.value = false
}
//我的外观获取
const handleGetMyAppearance = async (params) => {
  appearanceListLoading.value = true
  let res = await getMyAppearance(params)
  try{
    if(res.code === 20000){
      appearanceList.value = res.data
    }
  }catch{
    appearanceListLoading.value = false
  }
  appearanceListLoading.value = false
}
//搜索外观
const searchAppearance = () => {
  if(currentResource.value === 1){
    handleGetRecommendAppearance(templateQuery)
  }else{
    handleGetMyAppearance(templateQuery)
  }
}
const handleChooseResource = (item) => {
  if(!item.canUse) return
  if(item.id === currentResource.value){
    currentResource.value = 0
    return
  }
  Object.assign(templateQuery, defaultQuery)
  currentResource.value = item.id
  activeApperanceIndex.value = -1
  if(item.id === 1){
    handleGetRecommendAppearance()
  }else{
    handleGetMyAppearance()
  }
}
//当前激活的外观卡片
let activeApperanceIndex = ref(-1)
const handleApperance = (index) => {
  activeApperanceIndex.value = index
  store.commit('formDesignInfo/SET_APPEARANCEINFO', JSON.parse(JSON.stringify(appearanceList.value[index])));
}
onMounted(() => {
  handleGetRecommendAppearance()
  let themeColor = getComputedStyle(document.documentElement).getPropertyValue(`--el-color-primary`)
  document.getElementsByTagName('body')[0].style.setProperty('--primaryColor', themeColor)
})
</script>

<style lang="scss" scoped>
.container {
  .preview-header{
    height: 64px;
    background-color: $mainColor;
    display: flex;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
    .header-tabs{
      ::v-deep(.el-tabs__item){
        color: $white;
      }
      ::v-deep(.el-tabs__item.is-active){
        color: $white;
      }
      ::v-deep(.el-tabs__nav-wrap::after){
        background: transparent;
      }
      ::v-deep(.el-tabs__active-bar){
        background: $white;
      }
      ::v-deep(.el-tabs__header){
        margin: 0;
      }
    }
    .audit-btn-box{
      min-width: 300px;
      display: flex;
      .preview-btn{
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 15px;
        border: 1px solid $white;
        border-radius: 4px;
        background-color: inherit;
        color: $white;
        margin-right: 10px;
        cursor: pointer;
        transition: all 0.3s;
        .iconfont{
          margin-right: 3px;
        }
      }
      .preview-btn.preview-way-btn:hover{
        color: $mainColor;
        background-color: $white;
      }
      .preview-btn.preview-way-btn.active{
        color: $mainColor;
        background-color: $white;
      }
      .preview-btn:hover{
        background-color: rgba($white,0.1);
      }
      .preview-text1{
        font-style: 16px;
        color: $white;
      }
      .preview-text2{
        font-style: 14px;
        color: $white;
      }
      .line{
        margin: 0 10px;
        color: $white;
      }
    }
    .audit-btn-last{
      display: flex;
      justify-content: flex-end;
    }
  }
  .preview-content{
    width: 100vw;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    height: calc(100vh - 64px);
    background-color: $focusContent;
    display: flex;
    justify-content: space-between;
    .publish-resource{
      display: flex;
      z-index: 8;
      .resource-bar{
        width: 60px;
        box-sizing: border-box;
        border-right:1px solid #DCDFE6;
        height: 100%;
        background-color: $white;
        padding: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        a.resource-bar-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 30px;
          color: #444;
          .resource-bar-icon{
            height: 40px;
            width: 40px;
            margin-bottom: 10px;
            background-color: #F0F2F7;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            i{
              font-size: 20px;
              font-weight: bold;
            }
          }
          span{
            font-size: 12px;
          }
        }
        a.resource-bar-item.is-disabled{
          color: #aaaaaa;
          cursor: not-allowed;
        }
        a.resource-bar-item.is-choose{
          color: $mainColor;
          .resource-bar-icon{
            background-color: var(--el-color-primary-light-8);
          }
        }
      }
      .resource-window{
        width: 370px;
        height: 100%;
        box-shadow: 5px 0 10px rgba(0,0,0,0.1);
        background-color: $white;
        overflow: hidden;
        position: relative;
        .close-window-btn{
          position: absolute;
          i{
            font-size: 20px;
          }
          right: 15px;
          top: 15px;
        }
        .import-temps-content{
          width: 370px;
          box-sizing: border-box;
          height: 100%;
          .header-search{
            height: 68px;
            box-sizing: border-box;
            margin: 0 20px 20px;
            border-bottom: 1px solid #DCDFE6;
            display: flex;
            align-items: center;
            input{
              border: none;outline: none;
              flex: 1;
            }
          }
          .header-class {
            display: flex;
            height: 52px;
            padding: 0 20px;
            justify-content: space-around;
            a {
              display: block;
              height: 32px;
              line-height: 32px;
              padding: 0 10px;
              border-radius: 32px;
            }
            a.active {
              color: #fff;
              background-color: $mainColor;
            }
          }
          .inner-temps-content{
            height: calc(100% - 150px);
            .questions-model{
              padding: 0 20px;
              li{
                margin-bottom: 20px;
                width: 100%;
                overflow: hidden;
                cursor: pointer;
                img{
                  box-sizing: border-box;
                  margin-bottom: 10px;
                  width: 100%;
                  height: 80px;
                  border-radius: 8px;
                  object-fit: cover;
                }
                .color-box{
                  box-sizing: border-box;
                  margin-bottom: 10px;
                  width: 100%;
                  height: 80px;
                  border-radius: 8px;
                }
                .name{
                  font-size: 16px;
                  text-align: center;
                  color: #797979;
                }
              }
              li.active img{
                border: 4px solid $mainColor;
              }
              li.active .color-box{
                border: 4px solid $mainColor;
              }
              li.active div{
                color: $mainColor;
              }
            }

            .scroll-temps-content{
              padding: 0 20px;
              display: flex;
              flex-direction: column;
              .temps-item{
                width: 100%;
                margin-bottom: 20px;
                box-sizing: border-box;
                border-radius: 4px;
                border: 1px dashed rgba(0,0,0,0.2);
                cursor: pointer;
                transition: all 0.2s;
                .temps-box{
                  width: 100%;
                  border-bottom: 1px dashed rgba(0,0,0,0.2);
                }
                .temps-name{
                  line-height: 30px;
                  text-align: center;
                }
                &:hover{
                  border-color: $mainColor;
                  .temps-box{
                    border-color: $mainColor;
                  }
                }
              }
            }
          }
        }
      }
    }
    .left-box{
      box-sizing: border-box;
      width: 0;
      background: #fff;
      margin-right: 30px;
      position: relative;
      transition: all 0.8s;
      z-index: 9;
    
      .left-resize-bar {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        width: 7px;
        height: 100%;
        background-color: rgb(255, 255, 255);
        cursor: col-resize;
        user-select: none;
        transition: all ease 0.3s;
        font-size: 20px;
        color: #40485c;
        z-index: 999;

        &:hover {
          color: #fff !important;
          background-color: $mainColor !important;
        }
      }
      .col-btn-left {
        position: absolute;
        height: 120px;
        width: 16px;
        right: -16px;
        top: 50%;
        transform: translateY(-50%);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        background-color: $mainColor;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex-direction: column;
        z-index: 1;
        span {
          font-size: 14px;
          writing-mode: tb-rl;
          display: block;
          margin-bottom: 5px;
          color: #fff;
        }
        i {
          color: #fff;
          font-size: 12px;
          transform: rotate(-90deg);
        }
      }
      // 发布详情
      .publish-detail-box{
        height: calc(100vh - 160px);
        overflow-y: auto;
        overflow-x: hidden;
        // 移入显示滚动条
        &::-webkit-scrollbar
        {
            width:8px;
            height:8px;
            background-color:transparent;
        }
        &:hover::-webkit-scrollbar-thumb
        {
            border-radius:5px;
            -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
            background-color:rgba(0,0,0,0.1);
        }
        .publish-detail{
          box-sizing: border-box;
          width: v-bind(leftModuleWidth);
          padding: 0 40px;
          .label-value{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
            font-size: 16px;
            .label{
              flex-shrink: 0;
              width: 84px;
              color: #797979;
              align-self: flex-start;
            }
            .value{
              word-break: break-all;
            }
            .thumb{
              width: 160px;
              img{
                width: 100%;
              }
            }
            .isFromOhter{
              i{
                width: 18px;
                height: 18px;
                color: #589FF3;
                cursor: pointer;
              }
            }
          }
          .icon_text_box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon_text{
                // min-width: 57px;
                display: flex;
                flex-wrap: nowrap;
                margin-right: 12px;
                .iconfont{
                    margin-right: 2px;
                }
                .icon-morentupian{
                    color: #2CBF77;
                }
                .icon-lianjie{
                    color: #539EFA;
                }
                .icon-a-fujian1{
                    color: #C7C7C7;
                }
            }
          }
        }
      }
    }
    .left-box.col-expand-left {
      width: v-bind(leftModuleWidth);
      flex-shrink: 0;
      box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
      .col-btn-left i {
        transform: rotate(90deg);
      }
    }
    .safe-scan{
      width: 0;
      background: #fff;
      z-index: 999;
      // margin-left: 22px;
      transition: width 0.8s;
      position: relative;
      box-sizing: border-box;
      .safe-scan-detail{
        overflow: hidden;
      }
      .show-scanning{
        margin-top: 33vh;
        .scanning-box {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          .scan-logo {
            height: 60px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
            .success-logo {
              height: 60px;
              width: 60px;
              border-radius: 50%;
              background-color: #2cbf77;
              display: flex;
              align-items: center;
              justify-content: center;
              i {
                font-size: 43px;
                color: #fff;
              }
            }
          }
        }
      }
      .scan-result-box {
        width: v-bind(rigthModuleWidth);
        .scan-result-title{
          padding-left: 40px;
        }
        .scan-result-table {
          margin-top: 15px;
          ::v-deep(.el-table){
            padding-bottom: 20px;
            height: calc(100vh - 230px);
            overflow-y: auto;
            overflow-x: hidden;
          }
          ::v-deep(.el-table) tr.scan-result-table-header {
            background-color: #f8f8f8;
            th {
              background-color: #f8f8f8;
            }
          }
          .scan-result-table-text {
            display: flex;
          }
          .el-descriptions{
              ::v-deep .el-descriptions__body{
                  padding-left: 43px;
              }
          }
          ::v-deep .row-expand-unhas .el-table__expand-column {
              pointer-events: none;
          }
          ::v-deep .row-expand-unhas .el-table__expand-column .el-icon {
              visibility: hidden;
          }
        }
        .hos-report-list{
          padding: 0 40px;
          margin-top: 0;
        }
      }
      .dialog-footer-right-box{
        overflow: hidden;
        .dialog-footer-right{
          position: absolute;
          bottom: 20px;
          right: 40px;
        }
      }
      .col-btn {
        position: absolute;
        height: 120px;
        width: 16px;
        left: -16px;
        top: 50%;
        transform: translateY(-50%);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        background-color: $mainColor;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex-direction: column;
        span {
          font-size: 14px;
          writing-mode: tb-rl;
          display: block;
          margin-bottom: 5px;
          color: #fff;
        }
        i {
          color: #fff;
          font-size: 12px;
          transform: rotate(90deg);
        }
      }
      .editor-rigth-btns-box{
        position: absolute;
        top: 20px;
        left: -54px;
        height: v-bind(toolsBtnsHeigth);
        overflow: hidden;
        transition: all 0.4s;
        // box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.8);
        .editor-rigth-btns{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .tools{
            border-radius: 5px;
          }
          .circle{
            width: v-bind(toolsBtnsWidth);
            height: v-bind(toolsBtnsHeigth);
            border-bottom: 1px #fff solid;
            margin-left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
            font-size: 14px;
            background: $mainColor;
            color: #fff;
            box-sizing: border-box;
            overflow: hidden;
            .el-icon, i{
              font-size: 24px;
            }
            &:first-child{
              border-radius: 5px;
            }
            &:last-child{
              border-bottom-left-radius: 5px;
              border-bottom-right-radius: 5px;
            }
          }
        }
        &:hover{
          height: calc(4 * v-bind(toolsBtnsHeigth));
          .circle{
            &:first-child{
              border-top-left-radius: 5px;
              border-top-right-radius: 5px;
              border-bottom-left-radius: 0px;
              border-bottom-right-radius: 0px;
            }
          }
        }
      }
    }
    .safe-scan.col-expand {
      width: v-bind(rigthModuleWidth);
      flex-shrink: 0;
      box-shadow: -5px 0 5px rgba(0, 0, 0, 0.1);
      .col-btn i {
        transform: rotate(-90deg);
      }
    }
    .my-tabs-box{
      overflow: hidden;
      .my-tabs-detail{
        box-sizing: border-box;
        width: v-bind(leftModuleWidth);
        height: 59px;
        padding: 0px 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 40px;
        position: relative;
        color: #aaa;
        &::before{
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          width: calc(100% - 80px);
          height: 1px;
          background: rgb(121, 121, 121, 0.3);
          transform: translateX(-50%);
        }
        .my-tab{
          margin-right: 40px;
          cursor: pointer;
          white-space:nowrap
        }
        .my-tab-active{
          font-weight: bold;
          color: #000;
        }
      }
      .el-divider{
        width: calc(v-bind(leftModuleWidth) - 80px);
        margin: 0 auto;
      }
    }
    .my-tabs-box-right{
      .my-tabs-detail{
        width: v-bind(rigthModuleWidth);
        margin-bottom: 20px;
      }
    }
    .preview-father {
      flex: 1;
    }
  }
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.center-box{
  flex: 1;
  margin: 0 10px;
  border: 1px #dfd6d6 solid;
  .operating-area {
    padding-left: 20px;
    i {
      font-size: 16px;
      color: rgb(131, 131, 131);
      font-weight: 700;
      &:hover {
        color: #4395ff;
      }
    }
  }
  .el-input{
    margin-bottom: 20px;
  }
}
.safe-scan-detail{
  ::v-deep .el-tabs__header {
    padding: 0 20px;
    margin-bottom: 0;
  }
  ::v-deep .el-tabs__content {
    padding: 0 20px;
  }
  ::v-deep .el-tabs__item {
    line-height: 56px;
    height: 56px;
    font-size: 16px;
  }
  ::v-deep .el-form-item__label {
    text-align: center;
  }
}
.window-enter-to,
.window-leave-from{
  max-width: 370px;
}
.window-enter-active,
.window-leave-active{
  transition: all 0.8s;
}
.window-enter-from,
.window-leave-to{
  max-width: 0;
}
</style>